<template>
    <div class="main">
        <!-- 商家列表 -->
        <el-card class="box-card">
            <el-form :inline="true" :model="page" class="demo-form-inline">
                <el-form-item label="商家名称">
                    <el-input v-model="page.storeName" placeholder="请输入商家名称" clearable />
                </el-form-item>
                <el-form-item label="商家分类">
                    <el-select v-model="page.storeType" placeholder="请选择" clearable>
                        <el-option :label="item.name" :value="item.name" v-for="(item, index) in classification"
                            :key="index" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                    <el-button type="primary" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
            <el-button type="primary" style="margin-bottom: 30px;" @click="addEdiClick(1)">添加商家</el-button>
            <el-table :data="tableData" style="width: 100%" ref="multipleTableRef" max-height="600px">
                <el-table-column type="index" width="55" />
                <el-table-column label="商家logo" align="center">
                    <template #default="scope">
                        <img :src="scope.row.logo" alt="" style="width: 50px;height: 50px;" v-if="scope.row.logo">
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column prop="storeName" label="商家名称" align="center" show-overflow-tooltip />
                <el-table-column prop="productNum" label="商品数量" align="center" />
                <el-table-column prop="shopNum" label="门店数量" align="center" />
                <el-table-column prop="clerkNum" label="店员数量" align="center" />
                <el-table-column prop="createTime" label="创建时间" align="center" show-overflow-tooltip />
                <el-table-column label="商家分类" align="center" show-overflow-tooltip>
                    <template #default="scope">
                        <span>{{ scope.row.storeType.join(',') }}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="jumpTo(1, scope.row)">门店</el-button>
                        <el-button link type="primary" size="small" @click="jumpTo(2, scope.row)">店员</el-button>
                        <el-button link type="primary" size="small" @click="addEdiClick(2, scope.row)">编辑</el-button>
                        <el-button link type="danger" size="small" @click="delData(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination v-if="total != 0" :page="page" :total="total" @pageSizeChanged="handlePageSizeChange"
                @currentPageChanged="handleCurrentPageChange" />
        </el-card>
    </div>
    <el-dialog v-model="dialogVisible" :title="isAdd ? '新增' : '修改'" width="750px" :before-close="handleClose">
        <addEdi v-if="dialogVisible" :isAdd="isAdd" @closeOK="closeOK" @closeAdd="handleClose" :row="rowData.row">
        </addEdi>
    </el-dialog>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { getMerchantCenterList, deleteMerchantCenter, selectName } from '@/api/merchantManagement.js'
import Pagination from '@/components/pagination/index.vue' // 引入分页组件
import { ElMessage, ElMessageBox } from 'element-plus'
import addEdi from "./addEdi.vue";
import { useRouter } from 'vue-router';

const router = useRouter();

const dialogVisible = ref(false);
const isAdd = ref(false);
const page = reactive({
    storeName: "",
    storeType: "",
    pageNum: 1,
    pageSize: 10
})
const total = ref(0)
const tableData = reactive([])
const rowData = reactive({
    row: {}
})
const classification = reactive([])
// 搜索
const onSubmit = () => {
    getList()
}
// 重置
const reset = () => {
    page.storeName = "";
    page.storeType = "";
    page.pageNum = 1;
    page.pageSize = 10;
    getList()
}
// 分页
const handlePageSizeChange = (val) => {
    page.pageNum = 1
    page.pageSize = val
    getList()
}

const handleCurrentPageChange = (val) => {
    page.pageNum = val
    // page.pageSize = 10
    getList()
}


// 新增和修改
const addEdiClick = (num, row) => {
    dialogVisible.value = true
    if (num == 2) {
        isAdd.value = false
        rowData.row = row
    } else {
        isAdd.value = true

    }
}

// 确认弹框
const closeOK = () => {
    dialogVisible.value = false;
    getList()
}
// 关闭弹框
const handleClose = () => {
    dialogVisible.value = false;
}
// 删除
const delData = (scope) => {
    ElMessageBox.confirm(
        '是否删除该条数据?',
        '删除',
        {
            confirmButtonText: 'OK',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            deleteMerchantCenter(scope.id).then(res => {
                if (res.code == 200) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                    getList()
                }
            })

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}

// 获取列表
const getList = () => {
    tableData.length = 0;
    total.value = 0
    getMerchantCenterList(page).then(res => {
        if (res.code == 200) {
            tableData.push(...res.data.records)
            total.value = res.data.total
        }
    })
}

// 点击门店跳转
const jumpTo = (num, scope) => {
    if (num == 1) {
        router.push({
            path: '/ListMerchant',
            query: { id: scope.id } // 使用 query 参数
        });
    } else {
        router.push({
            path: '/shopAssistant',
            query: { id: scope.id, type: 0, storeId: scope.id } // 使用 query 参数
        });
    }
}
const getselectName = () => {
    classification.length = 0
    selectName().then(res => {
        if (res.code == 200) {
            classification.push(...res.data)
        }
    })
}



onMounted(() => {
    getList()
    getselectName()
})
</script>

<style lang="scss" scoped>
.box-card ::v-deep .el-select__wrapper {
    width: 100px;
}

.main {
    padding: 0 5px 5px 5px;
}
</style>